.form-field {
  @apply mb-6 peer-last-of-type:mb-8;
}

.form-field > label {
  @apply block mb-1.5 text-sm font-semibold dark:text-white;
}

.form-field > .validation {
  @apply mt-2 text-sm flex items-center;
}

.form-field > .validation svg {
  @apply w-3 h-3 mr-1;
}

.form-field > .validation.warning {
  @apply text-orange-400;
}

.form-field > .validation.error {
  @apply text-red-400;
}

.form-field > .validation.success {
  @apply text-green-400;
}

[type='text']:focus,
[type='email']:focus,
[type='url']:focus,
[type='password']:focus,
[type='number']:focus,
[type='date']:focus,
[type='datetime-local']:focus,
[type='month']:focus,
[type='search']:focus,
[type='tel']:focus,
[type='time']:focus,
[type='week']:focus,
[multiple]:focus,
textarea:focus,
select:focus {
  @apply border-gray-100 outline-none ring-gray-100;
}
